<template>
  <div class="content">
    <h2>商品货币单位</h2>
    <admin-container>
      <div class="button-group">
        <el-button type="primary" size="small" icon="el-icon-plus" @click="handleAdd">添加单位</el-button>
        <el-button :disabled="!isChanged" type="success" size="small" icon="el-icon-check"
          @click="insertOrUpdateProductCategories">全部保存</el-button>
      </div>
      <ul class="categorie-list">
        <li>
          <div class="categorie-title">
            <div>
              单位
            </div>
          </div>
        </li>
        <li v-for="(item, index) in list" :key="index">
          <el-button @click="handleDelete(item.id, index)" type="text" class="danger" icon="el-icon-delete"></el-button>
          <el-input v-model="item.unit" @input="isChanged = true" placeholder="请输入货币单位" size="small" :maxlength="8"
            show-word-limit></el-input>
        </li>
      </ul>
    </admin-container>
  </div>
</template>

<script>
import AdminContainer from '@/components/Admin/AdminContainer.vue';
import * as productPriceCurrenciesApi from '@/api/admin/productPriceCurrenciesApi'

export default {
  components: {
    AdminContainer
  },
  data () {
    return {
      list: [],
      isChanged: false,
    }
  },
  methods: {
    handleAdd () {
      this.list.push({ id: 0, unit: "" });
      this.isChanged = true;
    },
    getAllProductCategor () {
      var self = this;
      productPriceCurrenciesApi.getAllProductPriceCurrencies()
        .then(res => {
          if (res.code == 200) {
            self.list = res.data;
          }
          else if (res.code == 500) {
            self.$message.error(res.exception);
          }
        })
        .catch(err => {
          self.$message.error('保存失败，接口出错');
        })
    },
    insertOrUpdateProductCategories () {
      var self = this;
      productPriceCurrenciesApi.InsertOrUpdate(self.list)
        .then(response => {
          const { code, exception } = response;
          if (code === 200) {
            this.$message.success('保存成功');
            this.getAllProductCategor();
            this.isChanged = false;
          } else if (code === 500) {
            this.$message.error(exception);
          }
        })
        .catch(error => {
          this.$message.error('保存失败，接口出错');
        });
    },
    handleDelete (id, index) {
      var self = this;
      if (id == 0) {
        self.list.splice(index, 1)
      }
      else {
        self.$confirm('此操作将永久删除该商品单位, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          productPriceCurrenciesApi.deleteProductPriceCurrenciesById(id)
            .then(response => {
              const { code, exception } = response;
              if (code === 200) {
                this.$message.success('删除成功');
                this.getAllProductCategor();
              } else if (code === 500) {
                this.$message.error(exception);
              }
            })
            .catch(error => {
              this.$message.error('保存失败，接口出错');
            });
        }).catch(() => {

        });
      }
    },
    handleInput () {
      this.isChanged = true;
    }
  },
  mounted () {
    var self = this;
    self.getAllProductCategor();
  }
}
</script>

<style scoped>
.button-group {
  margin-bottom: 10px;
  border-bottom: 1px solid #F2F6FC;
  padding-bottom: 10px;
}

.categorie-list {
  padding: 0px;
}

.categorie-list li {
  display: flex;
  justify-items: center;
  align-items: center;
}

.categorie-list li .el-input {
  display: flex;
  align-items: center;
  flex-direction: row;
  margin-left: 10px;
}

.danger {
  color: #F56C6C;
}

.enable {
  padding: 0px 10px;
  box-sizing: border-box;
}

.enable .el-switch {
  justify-items: center;
  align-items: center;
}

.categorie-title {
  display: flex;
  margin-left: 25px;
  width: 100%;
  margin-bottom: 10px;
}

.categorie-title div {
  position: relative;
  width: 100%;
  font-size: 14px;
  font-weight: bold;
  color: #303133;
}

.categorie-title div+div {
  margin-left: 10px;
}

h2 {
  font-weight: 400;
  color: #1f2f3d;
  font-size: 28px;
  margin: 20px 0px;
}

.content {
  padding: 10px;
}
</style>